<template>
    <div id="rnav">
        <el-dropdown>
            <span class="el-dropdown-link">
                <i class="el-icon-more "></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                    <router-link :class="{act:active=='index'}" to="/index">首页</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                    <router-link :class="{act:active=='ctg'}" to="/ctg">分类</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                    <router-link :class="{act:active=='spcart'}" to="/spcart">购物车</router-link>
                </el-dropdown-item>
                <el-dropdown-item >
                    <router-link :class="{act:active=='order'}" to="/order">订单</router-link>
                </el-dropdown-item>
                <el-dropdown-item >
                    <router-link :class="{act:active=='mine'}" to="/mine">我的</router-link>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
                    
    </div>
</template>
<script>
export default {
    props:['active'],
}
</script>
<style>
#rnav{
    position: fixed;
    top: 0;
    right:0;
    z-index: 100;
    margin-top:22rem;
    margin-right:0rem;
}
#rnav .el-dropdown-link{
    font-size: 1.5rem;
    text-align: center;
    color:white;
    background-color: rgba(0,0,0,0.8);
    display: block;
    width:2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
}
 .el-dropdown-menu, .el-popper{
   background-color: rgba(0,0,0,0.8);
   
}
.el-dropdown-menu__item a{
    color:white;
    text-decoration: none;
}
.el-dropdown-menu__item{
    border-bottom: 1px solid rgb(92, 91, 91);
}
.el-popper[x-placement^=top] .popper__arrow::after{
    border-top-color:rgba(0,0,0,0.8);
}
</style>


